<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <el-col class="filter-column" :xl="6" :lg="8" :sm="12">
          <el-date-picker
            v-model="listQuery.date"
            type="daterange"
            range-separator="-"
            start-placeholder="充值开始日期"
            end-placeholder="充值结束日期"
          >
          </el-date-picker>
        </el-col>
        <el-col class="filter-column" :xl="6" :lg="8" :sm="12">
          <number-range
            :startValue.sync="listQuery.Residue_s"
            :endValue.sync="listQuery.Residue_e"
            startPlaceholder="余额最小值"
            endPlaceholder="余额最大值"
          />
        </el-col>
        <el-col class="filter-column" :xl="6" :lg="8" :sm="12">
          <number-range
            :startValue.sync="listQuery.Money_s"
            :endValue.sync="listQuery.Money_e"
            startPlaceholder="开号金额最小值"
            endPlaceholder="开号金额最大值"
          />
        </el-col>
        <el-col class="filter-column" :xl="6" :lg="8" :sm="12">
          <el-input
            placeholder="请输入游戏名"
            v-model="listQuery.Game"
            style="width: 160px"
            clearable
            @keyup.enter.native="handleFilter"
          />
          <el-input
            placeholder="请输入游戏端口"
            v-model="listQuery.Chan"
            style="width: 160px"
            clearable
            @keyup.enter.native="handleFilter"
          />
        </el-col>
        <el-col class="filter-column" :xl="6" :lg="8" :sm="12">
          <el-input
            placeholder="请输入充值账号"
            v-model="listQuery.Account"
            style="width: 160px"
            clearable
            @keyup.enter.native="handleFilter"
          />
          <el-input
            placeholder="请输入游戏币名称"
            v-model="listQuery.PayUse"
            style="width: 160px"
            clearable
            @keyup.enter.native="handleFilter"
          />
        </el-col>
        <el-col class="filter-column" :xl="6" :lg="8" :sm="12">
          <el-input
            placeholder="请输入手机号"
            v-model="listQuery.Phone"
            style="width: 160px"
            clearable
            @keyup.enter.native="handleFilter"
          />
          <el-input
            placeholder="请输入地区"
            v-model="listQuery.Area"
            style="width: 160px"
            clearable
            @keyup.enter.native="handleFilter"
          />
        </el-col>

        <el-col class="filter-column" :xl="6" :lg="8" :sm="12">
          <el-input
            placeholder="请输入账号来源"
            v-model="listQuery.source"
            style="width: 170px"
            clearable
            @keyup.enter.native="handleFilter"
          />
          <el-button type="primary" icon="el-icon-search" @click="handleFilter"
            >查询</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="options-container">
      <el-row>
        <el-col :lg="18" :sm="17">
          <div style="width: 100%; height: 25px"></div>
        </el-col>
        <el-col :lg="6" :sm="7"
          ><div class="grid-content bg-purple">
            <el-button
              class="filter-item"
              style="margin-left: 10px"
              type="primary"
              icon="el-icon-edit"
              @click="addCtlShow()"
              >添加</el-button
            >
            <el-button
              class="filter-item"
              style="margin-left: 10px"
              type="success"
              icon="el-icon-download"
              @click="downModle()"
              >导出</el-button
            >
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :key="tableKey"
        :data="list"
        border
        fit
        @sort-change="sortHanlde"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          prop="ID"
          sortable="custom"
          align="left"
          width="105"
        >
        </el-table-column>
        <el-table-column
          label="充值日期"
          prop="Rehcarge_Time"
          sortable="custom"
          width="120px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="游戏名"
          prop="Game"
          sortable="custom"
          width="120px"
          align="left"
        >
        </el-table-column>
        <el-table-column
          label="游戏端口"
          prop="Chan"
          sortable="custom"
          width="120px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="账号"
          prop="Account"
          sortable="custom"
          width="120px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="开号折扣点位"
          prop="Discount"
          sortable="custom"
          width="140px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="游戏币名称"
          prop="PayUse"
          sortable="custom"
          width="120px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="开号金额"
          sortable="custom"
          prop="Money"
          width="120px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="余额"
          prop="Residue"
          sortable="custom"
          width="120px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="账号来源"
          prop="source"
          sortable="custom"
          width="120px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="店铺名字"
          prop="Store"
          sortable="custom"
          width="120px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="手机号"
          prop="Phone"
          sortable="custom"
          width="120px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="手机型号"
          prop="device"
          sortable="custom"
          width="120px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="地区"
          prop="Area"
          sortable="custom"
          width="140px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="手机设备码"
          prop="Imei"
          sortable="custom"
          width="140px"
          align="left"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="left"
          width="180"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button type="success" size="mini" @click="updateInfo(scope.row)"
              >修改</el-button
            >
            <el-button type="danger" size="mini" @click="removeInfo(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="pageHandle"
      />
    </div>
    <div class="dialog-container">
      <!-- 角色编辑弹框 -->
      <account-edit-ctl
        :show.sync="accountEdit.show"
        :data="accountEdit.data"
        @success="getList"
      >
      </account-edit-ctl>
      <account-add-ctl :show.sync="accountAdd.show" @success="getList">
      </account-add-ctl>
    </div>
  </div>
</template>

<script>
import { getlist, remove_by_id, getlist4down } from "@/api/recharge_accout";
import Pagination from "@/components/Pagination";
import numberRange from "@/components/numberRange";
import accountAddctl from "./components/accountAdd";
import accountEditctl from "./components/accountEdit";
import g from "@/utils/utilFn";

export default {
  name: "rolesManage",
  components: {
    Pagination,
    "number-range": numberRange,
    "account-add-ctl": accountAddctl,
    "account-edit-ctl": accountEditctl,
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        date: [],
        start: "",
        end: "",
        Game: "",
        Chan: "",
        Account: "",
        PayUse: "",
        Residue_s: "",
        Residue_e: "",
        Phone: "",
        Area: "",
        Money_s: "",
        Money_e: "",
        source: "",
        page: 1,
        limit: 10,
        filed: "ID",
        sort: "descending",
      },
      logShow: {
        show: false,
        data: undefined,
      },
      accountEdit: {
        show: false,
        data: undefined,
      },
      accountAdd: {
        show: false,
        data: undefined,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      console.log(this.listQuery);
      this.listLoading = true;
      this.listQuery.start =
        (this.listQuery.date &&
          this.listQuery.date[0] &&
          g.format(this.listQuery.date[0], "yyyy-MM-dd")) ||
        "";
      this.listQuery.end =
        (this.listQuery.date &&
          this.listQuery.date[1] &&
          g.format(this.listQuery.date[1], "yyyy-MM-dd")) ||
        "";
      getlist(this.listQuery).then((response) => {
        this.list = response.data;
        this.total = response.count || 0;
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    },
    handleFilter() {
      this.getList();
    },
    sortHanlde(column) {
      console.log(column);
      this.listQuery.filed = column.prop;
      this.listQuery.sort = column.order;
      this.getList();
    },
    pageHandle(page) {
      this.listQuery.page = page.page;
      this.listQuery.limit = page.limit;
      this.getList();
    },
    showLog(row) {
      this.logShow.show = true;
      this.logShow.data = row;
    },
    addCtlShow(row) {
      this.accountAdd.show = true;
    },
    removeInfo(row) {
      this.$confirm(
        `此操作将永久删除【${row.Account}】充值账户信息, 是否继续?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          remove_by_id(row.ID).then((response) => {
            if (response.data > 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getList();
            } else {
              this.$message({
                type: "info",
                message: "删除失败",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateInfo(row) {
      this.accountEdit.show = true;
      this.accountEdit.data = row;
    },
    downModle() {
      this.listLoading = true;
      getlist4down(this.listQuery).then((response) => {
        var data = response.data;
        this.handleDownload(data);
        this.listLoading = false;
      });
    },
    handleDownload(data) {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "序号",
          "充值日期",
          "游戏名",
          "游戏端口",
          "账号",
          "开号折扣点位",
          "游戏币名称",
          "开号金额",
          "余额",
          "账号来源",
          "店铺名字",
          "手机号",
          "手机型号",
          "地区",
          "手机设备码",
        ];
        const filterVal = [
          "ID",
          "Rehcarge_Time",
          "Game",
          "Chan",
          "Account",
          "Discount",
          "PayUse",
          "Money",
          "Residue",
          "source",
          "Store",
          "Phone",
          "device",
          "Area",
          "Imei",
        ];
        data = this.formatJson(filterVal, data);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "充值账号信息",
          autoWidth: true,
          bookType: "xls",
        });
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
};
</script>

